<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>
    <a-card :bordered="false">
      <div class="table-operator" style="display: flex; justify-content: space-between">
        <NoBorderRadio @onChange="tabChange" :options="options" :defaultValue="2"></NoBorderRadio>
        <a-button type="primary" style="float: right" icon="plus" @click="showAddGoodsModal = true">添加商品</a-button>
      </div>
      <a-table
        :columns="columns"
        :loading="loading"
        :data-source="data"
        rowKey="goodsId"
        :pagination="pagination"
        @change="changePage"
      >
        <div class="pic" slot="pic" slot-scope="scope">
          <img :src="scope.coverImgUrl" />
        </div>
        <div solt="priceType" slot-scope="scope">
          <span v-if="scope.priceType == 1">一口价</span>
          <span v-if="scope.priceType == 2">价格区间</span>
          <span v-if="scope.priceType == 3">折扣价</span>
        </div>
        <div class="price" slot="price" slot-scope="scope">
          <span>￥{{ scope.price }}</span>
        </div>
        <div class="price" slot="price2" slot-scope="scope">
          <span>￥{{ scope.price2 }}</span>
        </div>
        <span slot="action" slot-scope="scope">
          <a-popconfirm
            title="确定要删除该商品吗?"
            ok-text="确定"
            cancel-text="取消"
            @confirm="deleteGood(scope.goodsId)"
          >
            <a-button type="link" size="small">删除</a-button>
          </a-popconfirm>
        </span>
      </a-table>
    </a-card>
    <a-modal
      title="添加商品"
      width="700px"
      :destroyOnClose="true"
      :visible="showAddGoodsModal"
      :confirmLoading="confirmLoading"
      @ok="onAddGoodsOk"
      @cancel="
        showAddGoodsModal = false
        confirmLoading = false
      "
    >
      <goodsAdd ref="goodsAdd"></goodsAdd>
    </a-modal>
  </page-header-wrapper>
</template>
<script>
import { getWxliveGoods, deleteWxliveGood } from '@/api/plugin/wxlive'
import goodsAdd from './goodAdd'
import NoBorderRadio from '@/components/NoBorderRadio/NoBorderRadio'

export default {
  name: 'WxListGoodsList',
  components: {
    goodsAdd,
    NoBorderRadio,
  },
  data() {
    return {
      columns: [
        {
          title: 'ID',
          dataIndex: 'goodsId',
        },
        {
          title: '商品名称',
          dataIndex: 'name',
        },
        {
          title: '缩略图',
          scopedSlots: { customRender: 'pic' },
        },
        {
          title: '链接',
          dataIndex: 'url',
        },
        {
          priceType: '价格方式',
          scopedSlots: { customRender: 'priceType' },
        },
        {
          title: '价格1',
          scopedSlots: { customRender: 'price' },
        },
        {
          title: '价格2',
          scopedSlots: { customRender: 'price2' },
        },
        {
          title: '操作',
          width: '150px',
          scopedSlots: { customRender: 'action' },
        },
      ],
      options: [
        {
          title: '审核通过',
          value: 2,
        },
        {
          title: '未审核',
          value: 0,
        },
        {
          title: '审核中',
          value: 1,
        },
        {
          title: '审核驳回',
          value: 3,
        },
      ],
      data: [],
      showAddGoodsModal: false,
      confirmLoading: false,
      loading: false,
      search: {
        pageNo: 1,
        pageSize: 10,
        status: '2',
      },
      pagination: {
        total: 0,
        pageSize: 10,
        current: 1,
      },
    }
  },
  created() {
    this.getGoods()
  },
  methods: {
    tabChange(key) {
      this.search.status = key
      this.getGoods()
    },
    changeTab(val) {
      if (val == 1) {
        this.$router.push({ name: 'WxliveList' })
      }
    },
    onAddGoodsOk() {
      this.confirmLoading = true
      this.$refs.goodsAdd.toSave().then(
        () => {
          this.$message.success('添加成功')
          this.showAddGoodsModal = false
          this.confirmLoading = false
          this.search.status = '1'
          this.search.pageNo = 1
          this.getGoods()
        },
        () => {
          this.confirmLoading = false
        }
      )
    },
    changeGoodsTab(status) {
      this.search.pageNo = 1
      this.search.status = status
      this.getGoods()
    },
    getGoods() {
      this.loading = true
      getWxliveGoods(this.search).then((res) => {
        if (res.code == 0) {
          this.pagination.total = res.data.total
          this.data = res.data.list
        }
        this.loading = false
      })
    },
    changePage(e) {
      this.search.pageNo = e.current
      this.getGoods()
    },
    deleteGood(goods_id) {
      this.loading = true
      deleteWxliveGood({ goods_id }).then((res) => {
        if (res.code === 0) {
          this.$message.success('删除成功')
          this.getGoods()
        }
        this.loading = false
      })
    },
  },
}
</script>
<style lang="less" scoped>
.status {
  .close {
    display: flex;
    align-items: center;
    font-size: 12px;
    span:nth-child(1) {
      border-radius: 4px;
      background-color: #636c72;
      color: #fff;
      padding: 0 5px;
    }
    span:nth-child(2) {
      width: 1px;
      height: 14px;
      background-color: #666;
      margin: 0 5px;
    }
    span:nth-child(3) {
      color: #0275d8;
      cursor: pointer;
    }
  }
  .finish {
    display: inline-block;
    font-size: 12px;
    padding: 0 5px;
    color: #fff;
    background-color: #d9534f;
    border-radius: 4px;
  }
}
.pic {
  width: 80px;
  height: 80px;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>
